import React, { Component } from 'react'
import './4_changeBg.css';
//导入 lodash
import {random as r} from 'lodash'; // let _ = require('lodash');

export default class ChangeBg extends Component {
  //声明 state
  state = {
    color: 'rgb(0,0,0)'
  }

  //声明事件方法
  changeBg = (e) => {
    // setState 执行之后, render 方法自动重新调用, 重新渲染元素
    this.setState({
      color: `rgb(${r(0, 255)},${r(0, 255)},${r(0, 255)})`
    });
  }

  render() {
    return (
      <div style={{background: this.state.color}} className="box" onClick={this.changeBg}></div>
    )
  }
}
